<template>
  <section>
      <div class="qrcode">
          <canvas id="qrcode"></canvas>
      </div>
  </section>
</template>

<script>
    import QRCode from 'qrcode'
export default {
    components: {
    },
  data() {
    return {
        url: this.$route.query.url || ""
    }
  },
  mounted() {
  },
  created() {
      setTimeout(()=>{
        this.handleQr();
      }, 1000)
  },

  methods: {
      handleQr() {
          console.log(this.url)
          if(this.url && this.url.length > 0) {
            let qrcode = document.getElementById('qrcode')
            QRCode.toCanvas(qrcode, this.url, { width:600, margin: 3 }, (error)=>{
                if (error) {
                    this.$message.success("生成二维码失败");
                }

                console.log("success")
            })
          }
      }
  }
};
</script>

<style lang="scss" scoped>
        .qrcode {
        //   float: right;
          width: 600px;
          height: 600px;
        //   margin-right: 0.32rem;
          position: relative;
          #qrcode {
            position: absolute;
            z-index: 1;
            width: 100% !important;
            height: 100% !important;
          }
          .solid {
            position: absolute;
            z-index: 0;
            width: 0.32rem;
            height: 0.32rem;
            background-color: #fa3138;
            border-radius: 1px;
          }
          .solid1 {
            top: -1px;
            left: -1px;
          }
          .solid2 {
            top: -1px;
            right: -1px;
          }
          .solid3 {
            bottom: -1px;
            right: -1px;
          }
          .solid4 {
            bottom: -1px;
            left: -1px;
          }
          .qrcode-title {
            font-size: 0.28rem;
            width: 100%;
            height: 0.4rem;
            line-height: 0.4rem;
            color: #999999;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: -0.25rem;
            z-index: 2;
          }
        }
</style>
